<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <!-- bootstrap4 -->
    <link rel="stylesheet" href="css/release/bootstrap.min.css">
    <link rel="stylesheet" href="css/release/screen-dist.css">
    <title>五十音图 | 拗音</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="row">
                    <div class="col jiaming-title">平假名</div>
                </div>
                <div class="row row-cols-6">
                    <!-- 第一行 -->
                    <div class="col jiaming jiaming-aoyin" id="kya" data-toggle="tooltip" title="kya">きゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="kyu" data-toggle="tooltip" title="kyu">きゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="kyo" data-toggle="tooltip" title="kyo">きょ</div>
                    <div class="col jiaming jiaming-aoyin" id="gya" data-toggle="tooltip" title="gya">ぎゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="gyu" data-toggle="tooltip" title="gyu">ぎゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="gyo" data-toggle="tooltip" title="gyo">ぎょ</div>
                    <!-- 第二行 -->
                    <div class="col jiaming jiaming-aoyin" id="sya" data-toggle="tooltip" title="sya">しゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="syu" data-toggle="tooltip" title="syu">しゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="syo" data-toggle="tooltip" title="syo">しょ</div>
                    <div class="col jiaming jiaming-aoyin" id="zya" data-toggle="tooltip" title="zya">じゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="zyu" data-toggle="tooltip" title="zyu">じゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="zyo" data-toggle="tooltip" title="zyo">じょ</div>
                    <!-- 第三行 -->
                    <div class="col jiaming jiaming-aoyin" id="tya" data-toggle="tooltip" title="tya">ちゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="tyu" data-toggle="tooltip" title="tyu">ちゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="tyo" data-toggle="tooltip" title="tyo">ちょ</div>
                    <div class="col jiaming jiaming-aoyin" id="dya" data-toggle="tooltip" title="dya">ぢゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="dyu" data-toggle="tooltip" title="dyu">ぢゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="dyo" data-toggle="tooltip" title="dyo">ぢょ</div>
                    <!-- 第四行 -->
                    <div class="col jiaming jiaming-aoyin" id="nya" data-toggle="tooltip" title="nya">にゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="nyu" data-toggle="tooltip" title="nyu">にゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="nyo" data-toggle="tooltip" title="nyo">にょ</div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <!-- 第五行 -->
                    <div class="col jiaming jiaming-aoyin" id="hya" data-toggle="tooltip" title="hya">ひゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="hyu" data-toggle="tooltip" title="hyu">ひゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="hyo" data-toggle="tooltip" title="hyo">ひょ</div>
                    <div class="col jiaming jiaming-aoyin" id="bya" data-toggle="tooltip" title="bya">びゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="byu" data-toggle="tooltip" title="byu">びゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="byo" data-toggle="tooltip" title="byo">びょ</div>
                    <!-- 第六行 -->
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin" id="pya" data-toggle="tooltip" title="pya">ぴゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="pyu" data-toggle="tooltip" title="pyu">ぴゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="pyo" data-toggle="tooltip" title="pyo">ぴょ</div>
                    <!-- 第七行 -->
                    <div class="col jiaming jiaming-aoyin" id="mya" data-toggle="tooltip" title="mya">みゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="myu" data-toggle="tooltip" title="myu">みゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="myo" data-toggle="tooltip" title="myo">みょ</div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <!-- 第八行 -->
                    <div class="col jiaming jiaming-aoyin" id="rya" data-toggle="tooltip" title="rya">りゃ</div>
                    <div class="col jiaming jiaming-aoyin" id="ryu" data-toggle="tooltip" title="ryu">りゅ</div>
                    <div class="col jiaming jiaming-aoyin" id="ryo" data-toggle="tooltip" title="ryo">りょ</div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                </div>
            </div>
            <div class="col-1"></div>
            <div class="col">
                <div class="row">
                    <div class="col jiaming-title">片假名</div>
                </div>
                <div class="row row-cols-6">
                    <!-- 第一行 -->
                    <div class="col jiaming jiaming-aoyin" id="kya2" data-toggle="tooltip" title="kya">キャ</div>
                    <div class="col jiaming jiaming-aoyin" id="kyu2" data-toggle="tooltip" title="kyu">キュ</div>
                    <div class="col jiaming jiaming-aoyin" id="kyo2" data-toggle="tooltip" title="kyo">キョ</div>
                    <div class="col jiaming jiaming-aoyin" id="gya2" data-toggle="tooltip" title="gya">ギャ</div>
                    <div class="col jiaming jiaming-aoyin" id="gyu2" data-toggle="tooltip" title="gyu">ギュ</div>
                    <div class="col jiaming jiaming-aoyin" id="gyo2" data-toggle="tooltip" title="gyo">ギョ</div>
                    <!-- 第二行 -->
                    <div class="col jiaming jiaming-aoyin" id="sya2" data-toggle="tooltip" title="sya">シャ</div>
                    <div class="col jiaming jiaming-aoyin" id="syu2" data-toggle="tooltip" title="syu">シュ</div>
                    <div class="col jiaming jiaming-aoyin" id="syo2" data-toggle="tooltip" title="syo">ショ</div>
                    <div class="col jiaming jiaming-aoyin" id="zya2" data-toggle="tooltip" title="zya">ジャ</div>
                    <div class="col jiaming jiaming-aoyin" id="zyu2" data-toggle="tooltip" title="zyu">ジュ</div>
                    <div class="col jiaming jiaming-aoyin" id="zyo2" data-toggle="tooltip" title="zyo">ジョ</div>
                    <!-- 第三行 -->
                    <div class="col jiaming jiaming-aoyin" id="tya2" data-toggle="tooltip" title="tya">チャ</div>
                    <div class="col jiaming jiaming-aoyin" id="tyu2" data-toggle="tooltip" title="tyu">チュ</div>
                    <div class="col jiaming jiaming-aoyin" id="tyo2" data-toggle="tooltip" title="tyo">チョ</div>
                    <div class="col jiaming jiaming-aoyin" id="dya2" data-toggle="tooltip" title="dya">ヂャ</div>
                    <div class="col jiaming jiaming-aoyin" id="dyu2" data-toggle="tooltip" title="dyu">ヂュ</div>
                    <div class="col jiaming jiaming-aoyin" id="dyo2" data-toggle="tooltip" title="dyo">ヂョ</div>
                    <!-- 第四行 -->
                    <div class="col jiaming jiaming-aoyin" id="nya2" data-toggle="tooltip" title="nya">ニャ</div>
                    <div class="col jiaming jiaming-aoyin" id="nyu2" data-toggle="tooltip" title="nyu">ニュ</div>
                    <div class="col jiaming jiaming-aoyin" id="nyo2" data-toggle="tooltip" title="nyo">ニョ</div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <!-- 第五行 -->
                    <div class="col jiaming jiaming-aoyin" id="hya2" data-toggle="tooltip" title="hya">ヒャ</div>
                    <div class="col jiaming jiaming-aoyin" id="hyu2" data-toggle="tooltip" title="hyu">ヒュ</div>
                    <div class="col jiaming jiaming-aoyin" id="hyo2" data-toggle="tooltip" title="hyo">ヒョ</div>
                    <div class="col jiaming jiaming-aoyin" id="bya2" data-toggle="tooltip" title="bya">ビャ</div>
                    <div class="col jiaming jiaming-aoyin" id="byu2" data-toggle="tooltip" title="byu">ビュ</div>
                    <div class="col jiaming jiaming-aoyin" id="byo2" data-toggle="tooltip" title="byo">ビョ</div>
                    <!-- 第六行 -->
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin" id="pya2" data-toggle="tooltip" title="pya">ピャ</div>
                    <div class="col jiaming jiaming-aoyin" id="pyu2" data-toggle="tooltip" title="pyu">ピュ</div>
                    <div class="col jiaming jiaming-aoyin" id="pyo2" data-toggle="tooltip" title="pyo">ピョ</div>
                    <!-- 第七行 -->
                    <div class="col jiaming jiaming-aoyin" id="mya2" data-toggle="tooltip" title="mya">ミャ</div>
                    <div class="col jiaming jiaming-aoyin" id="myu2" data-toggle="tooltip" title="myu">ミュ</div>
                    <div class="col jiaming jiaming-aoyin" id="myo2" data-toggle="tooltip" title="myo">ミョ</div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <!-- 第八行 -->
                    <div class="col jiaming jiaming-aoyin" id="rya2" data-toggle="tooltip" title="rya">リャ</div>
                    <div class="col jiaming jiaming-aoyin" id="ryu2" data-toggle="tooltip" title="ryu">リュ</div>
                    <div class="col jiaming jiaming-aoyin" id="ryo2" data-toggle="tooltip" title="ryo">リョ</div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                    <div class="col jiaming jiaming-aoyin-blank"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 浮动菜单 -->
    <div class="float-menu">
        <div class="float-button" id="index">清音</div>
        <div class="float-button" id="zhuoyin">浊音</div>
    </div>
    <!--Aplayer-->
    <div id="aplayer" style="display: none;"></div>
    <!-- jq, popper, bootstrap -->
    <script src="js/release/jquery.slim.min.js"></script>
    <script src="js/release/popper.min.js"></script>
    <script src="js/release/bootstrap.min.js"></script>
    <!--Aplayer-->
    <script src="js/release/APlayer.min.js"></script>
    <!--Aplayer配置-->
    <script src="js/aplayerConfig.js"></script>
    <!--实现点击播放-->
    <script src="js/release/play-dist.js"></script>
    <!-- 浮动菜单链接 -->
    <script src="js/release/openlink-dist.js"></script>
    <!-- 启用Tooltip -->
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
</body>

</html>